<template>
  <div class="app-container">
    <div class=" problemDetail-container">
      <div class="filter-container">
        <el-button type="primary" style="margin-bottom: 20px" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        <el-card shadow="never" class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 13px;color: #999;">发布人：{{problemDetail.studentName}}</span>
            <el-divider direction="vertical"></el-divider>
            <time class="time">发布时间：{{problemDetail.addingTime}}</time>
            <el-link v-if="problemDetail.url" :href="problemDetail.url">
              <el-button v-if="problemDetail.url" type="primary" size="mini" style="float: right">下载附件</el-button>
            </el-link>
          </div>
          <el-form label-position="top" size="mini">
            <el-form-item label="相关题目：">{{problemDetail.questionName ? problemDetail.questionName : '暂无'}}</el-form-item>
            <el-form-item label="问题内容："><span v-html="problemDetail.problemContent">{{problemDetail.problemContent}}</span></el-form-item>
          </el-form>
        </el-card>
      </div>
      <div style="margin-top: 10px" v-show="problemReply.length===0">暂无回答</div>

      <el-divider v-if="problemReply.length>0" content-position="left">回答</el-divider>

      <!--      <div style="height: 300px">-->
<!--        <el-scrollbar style="height:100%">-->
        <el-collapse v-if="problemReply" v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="item in problemReply" name="1">
            <template slot="title">
              <i class="el-icon-user"></i><span style="font-weight: bolder">{{item.teacherName}}</span>
            </template>
            <div>{{item.replyContent}}</div>
            <div style="color: #999;font-size: 13px;">回复时间：{{item.replyTime}}</div>
          </el-collapse-item>
        </el-collapse>
<!--        </el-scrollbar>-->
<!--      </div>-->

    </div>

  </div>
</template>
<script>
  import {getAllList,getDetail,getProblemReply} from '@/api/problems'
  export default {
    data() {
      return {
        activeNames: ['1'],
        answers:[{
          teacherName: '张三',
          answer:'很好',
          time: '2019.12.05'
        },{
          teacherName: '张三',
          answer:'很好',
          time: '2019.12.05'
        },{
          teacherName: '张三',
          answer:'很好',
          time: '2019.12.05'
        },{
          teacherName: '张三',
          answer:'很好',
          time: '2019.12.05'
        },{
          teacherName: '张三',
          answer:'很好',
          time: '2019.12.05'
        }
        ],
        problemDetail:{
          addingTime: '',
          pid: '',
          problemContent: '',
          qid: '',
          questionName: '',
          sid: '',
          state: '',
          studentName:'',
          url: '',
        },
        problemReply:[]
      }
    },
    created(){
      this.getProblemDetail()
      this.getProblemReply()
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      getProblemDetail(){
        let pid = this.$route.query.pid
        getDetail({pid : pid}).then(res => {
          this.problemDetail = res.data
        }).catch(err =>{
          this.$message.error('请求失败！')
        })

      },
      getProblemReply(){
        let pid = this.$route.query.pid
        getProblemReply({pid : pid}).then(res => {
          this.problemReply = res.data.list
        }).catch(err =>{
          this.$message.error('请求失败！')
        })

      },
      goBack(){
        this.$router.go(-1)
      }
    },
    computed: {

    },
  }
</script>
<style lang="scss">
  .time {
    font-size: 13px;
    color: #999;
  }
  .problemDetail-container{
  .el-card__header{
    background-color: #fafafa;
    padding: 15px;
  }
    .el-card__body{
      /*background-color: rgb(222,225,230);*/
      padding: 15px;

    }
  .el-collapse-item__header{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #c3d6dd;
    /*background-color: #fafafa;*/

    padding: 15px;
  }
  .el-collapse-item__wrap{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #fafafa;

    margin-bottom: 5px;
    padding: 15px;
  }
    .el-scrollbar .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  }

</style>

